import Taro, { Component } from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { toAnyPage } from '@/utils/page_router'

interface IProps {
  list: any
  number: number
  className: string
}

/**
 * 自定义导航栏1
 */
export default class Index extends Component<IProps, {}> {
  props: any
  static options = {
    addGlobalClass: true
  }

  render() {
    const { list=[], number=4, className }:any = this.props
    return (<View className={classNames('custom-nav-one d-f f-w-w', className)}>
      {list.map(n => {
        return (<View key={n.link_id} className='nav-item d-f f-d-c a-i-c' style={{width: `${100 / number}%`}} onClick={() => toAnyPage(n.url)}>
          <Image src={n.pic} className='nav-img' style={{width: n.w ? `${n.w}rpx` : "80rpx", height: n.h ? `${n.h}rpx` : "80rpx"}}/>
          <View className='nav-title'>{n.title}</View>
        </View>)
      })}
    </View>)
  }
}
